<template>
  <div class="tabbar">
    <el-row>
      <el-col :span="5">
        <div class="tabbar-title">
          <p class="tabbar-title-text">漫漫</p>
          <p>寻子路</p>
        </div>
      </el-col>
      <el-col :span="4"></el-col>
      <el-col :span="15" class="tabbar-bar">
        <div v-for="(item, index) in tabbar" :key="index">
          <router-link
            :to="item.path"
            @click="exChangeTab(index)"
            :class="currentIndex === index ? 'active' : ''"
            >{{ item.title }}</router-link
          >
        </div>
        <div v-if="userInfos == null" @click="goLogin" class="login">
          登录/注册
        </div>

        <el-dropdown class="info" v-else>
          <div class="info-img">
            <el-avatar :size="40" :src="userInfos.avater" />
            <span>{{ userInfos.userName }}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <el-icon><Avatar /></el-icon>
                <div @click="gotoPersonal">个人中心</div>
                <el-icon><ArrowRightBold /></el-icon>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-icon><BellFilled /></el-icon>
                <div @click="registeInfo">信息登记</div>
                <el-icon><ArrowRightBold /></el-icon>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-icon><SwitchButton /></el-icon>
                <div @click="outLogin">退出登录</div>
                <el-icon><ArrowRightBold /></el-icon>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const userInfos = ref<any>({});
const currentIndex = ref(
  JSON.parse(window.sessionStorage.getItem("active") || "0")
);

const tabbar = reactive([
  { id: 1, title: "首页", path: "/userhome" },
  { id: 2, title: "新闻资讯", path: "/news" },
  { id: 3, title: "成功案例", path: "/succnews" },
  { id: 4, title: "公益活动", path: "/active" },
  { id: 5, title: "社区留言", path: "/reviews" },
  { id: 6, title: "加入我们", path: "/aboutme" },
]);

onMounted(() => {
  userInfos.value = JSON.parse(
    window.sessionStorage.getItem("Infos") || "null"
  );
});

//首页登录
const goLogin = () => {
  window.sessionStorage.clear();
  router.push("/ulogin");
};
// 用户个人中心退出登录
const outLogin = () => {
  window.sessionStorage.clear();
  router.push("/ulogin");
};
// 个人中心
const gotoPersonal = () => {
  window.sessionStorage.setItem("active", "6");
  router.push("/center");
};
//信息登记
const registeInfo = () => {
  window.sessionStorage.setItem("active", "6");
  router.push("/registe");
};
const exChangeTab = (index: number) => {
  window.sessionStorage.removeItem("path");
  window.sessionStorage.setItem("path", "/center/info");
  currentIndex.value = index;
  window.sessionStorage.setItem("active", JSON.stringify(currentIndex.value));
};
</script>

<style lang="less" scoped>
.active {
  color: #2563eb;
}

.tabbar {
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 0px 5px 2px #eee;
  // border-bottom: 1px solid rgb(220, 219, 219);
  color: #000;
  padding: 5px 0;
  .el-col {
    padding: 0px;
  }
  &-title {
    display: flex;
    font-style: italic;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    &-text {
      color: #000;
      font-size: 28px;
      padding-right: 10px;
    }
  }
  &-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
.info {
  display: flex;
  align-items: center;
  &-img {
    display: flex;
    align-items: center;
    span {
      margin: 0 5px;
      white-space: nowrap;
      font-size: 12px;
    }
  }
}
.login:hover {
  cursor: pointer;
}
</style>
